<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="客户名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('十二大产业贷')"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <el-tooltip effect="light" :content="scope.row.address">
          <div class="text-truncate">{{ scope.row.address }}</div>
        </el-tooltip>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <project-view-dialog
      :visible.sync="visible"
      :batch-no="attachNo"
      :query-id="queryId"
    ></project-view-dialog>
  </div>
</template>

<script>
import { deltaDay } from '@/common/plugins/tools/date'
import ProjectViewDialog from '@/bank/views/limit/ProjectViewDialog'
import hndTableMixin from '@/bank/views/business/limit/history/mixins'
export const DATE_EXPIRE = 60
export default {
  components: {
    ProjectViewDialog,
  },
  props: {},
  mixins: [hndTableMixin],
  data() {
    return {
      params: {
        index: 1,
        size: 10,
        'import_status.eq': '',
        'load_beh_status.eq': 1,
        'review_approval.gte': 4,
        'review_approval.lt': 9,
      },
      tableColumns: [
        {
          attrs: { label: '客户名称', prop: 'customer_name', minWidth: '110px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '在保余额', prop: 'warranty_amount', align: 'center' } },
        { attrs: { label: '开始时间', prop: 'startDate', align: 'center', width: 140 } },
        { attrs: { label: '到期时间', prop: 'loadEndDate', align: 'center', width: 140 } },
        { attrs: { label: '导入银行', prop: 'bank_name', align: 'center', minWidth: '90px' } },
        { attrs: { label: '剩余到期天数', prop: 'endDay', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', minWidth: 130 },
          operations: [{ content: '查看', icon: 'fa fa-search', event: this.projectDetail }],
        },
      ],
      dateFmt: 'yyyy-MM-dd',
      tableData: [],
      totalCount: 0,
      loading: false,
      queryId: '',
      attachNo: '',
      visible: false,
      tableName: 'datum_one_county_industry',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.params['load_end_date.lte'] = this.$utils.dateFormat(
      new Date(+new Date() + DATE_EXPIRE * 8.64e7),
      'yyyy-MM-dd'
    )
    this.params['load_end_date.gt'] = this.$utils.dateFormat(new Date(), 'yyyy-MM-dd')
    this.getData()
  },
  mounted() {},
  methods: {
    // getParams() {
    //   return this.params
    // },
    projectDetail(row) {
      this.queryId = row.customer_related_id
      this.attachNo = row.project_approval_batch_bank_id || ''
      this.visible = true
    },
    getData() {
      this.loading = true
      this.$api
        .getData('credit', 'datum_one_county_industry', this.getParams(), { load_end_date: 'desc' })
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data?.data ?? []).map(this.dataAdapter)
          this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.resName = `A角: ${item.res_a_name} B角: ${item.res_b_name}`
      item.startDate = this.$utils.dateFormat(item.load_date, this.dateFmt)
      item.loadEndDate = this.$utils.dateFormat(item.load_end_date, this.dateFmt)
      item.endDay = deltaDay(this.$utils.dateFormat(new Date(), this.dateFmt), item.loadEndDate)
      return item
    },
  },
}
</script>

<style lang="scss" scoped></style>
